<template>
	<view class="index">
		<music-head title="温情云音乐" :showIcon="false" fontColor="black" :top="menuButtonInfo.top"></music-head>

		<view class="index-search" @tap="toSearch">
			<text class="iconfont iconsearch"></text>
			<input type="text" placeholder="搜索歌曲" />
		</view>

		<view class="user-box">
			<view @tap="goPersonal">
				<img :src="userInfo.avatarUrl" alt="" />
				<text>{{ userInfo.nickname }}</text>
			</view>
			<view @tap="loginAndLoginoutHandle">{{ userInfo.isLogin }}</view>
		</view>

		<view class="scroll-box">
			<scroll-view scroll-y="true">
				<view class="index-swiper">
					<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500">
						<swiper-item v-for="item in bannerList" :key="item.pic" @tap="swiperClick(item)">
							<img :src="item.pic" />
							<view class="banner-title" :style="{ 'background-color': item.titleColor }">{{ item.typeTitle }}</view>
						</swiper-item>
					</swiper>
				</view>

				<block v-if="loading">
					<skeleton
						:loading="loading"
						:avatarSize="skeleton.avatarSize"
						avatarShape="square"
						:titleWidth="skeleton.titleWidth"
						:row="2"
						:showTitle="skeleton.showTitle"
						v-for="(item, index) in 4"
						:key="index"
					></skeleton>
				</block>

				<block v-else>
					<view class="top-music-list">
						<view class="music-item" v-for="item in topListArr" :key="item.id" @tap="toList(item.id)">
							<view class="music-img">
								<image :src="item.coverImgUrl" alt="" />
								<text>{{ item.updateFrequency }}</text>
							</view>
							<view class="music-text">
								<view v-for="(itm, idx) in item.tracks" :key="item.first">
									<text>{{ idx + 1 }}. {{ itm.first }} - {{ itm.second }}</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import musicHead from '@/components/music_head/music_head.vue';
import Skeleton from '@/components/J-skeleton/J-skeleton.vue';
import { topList, getBanner } from '@/common/api.js';

export default {
	data() {
		return {
			// 排行榜
			topListArr: [],
			// 骨架屏
			loading: true,
			skeleton: {
				avatarSize: '212rpx',
				titleWidth: '60vw',
				showTitle: true
			},
			// 微信小程序胶囊按钮信息
			menuButtonInfo: {
				top: 20
			},
			// 用户头像/名称
			userInfo: {
				avatarUrl: '../../static/youke.png',
				nickname: '游客',
				isLogin: '立即登录',
				userId: null
			},
			// 轮播图
			bannerList: []
		};
	},
	components: {
		musicHead,
		Skeleton
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		/* 获取微信小程序胶囊按钮信息 */
		this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		// #endif
		this.loading = true;
		/* 排行榜数据 */
		topList().then(res => {
			console.log(res.list);
			if (res.code === 200) {
				this.loading = false;
				this.topListArr = res.list;
			}
		});
		/* 轮播图数据 */
		getBanner().then(res => {
			this.bannerList = res[1].data.banners;
			console.log('轮播图', this.bannerList);
		});
	},
	onShow() {
		/* 获取用户信息 */
		uni.getStorage({
			key: 'userInfo',
			success: res => {
				console.log('用户信息', res);
				this.userInfo = {
					avatarUrl: res.data.avatarUrl,
					nickname: res.data.nickname,
					isLogin: '退出登录',
					userId: res.data.userId
				};
			}
		});
	},
	methods: {
		/* 跳转搜索页 */
		toSearch() {
			uni.navigateTo({
				url: '/pages/search/search'
			});
		},
		/* 跳转列表页 */
		toList(id) {
			uni.navigateTo({
				url: `/pages/top/top?id=${id}`
			});
		},
		/* 登录/退出登录按钮 */
		loginAndLoginoutHandle() {
			if (!this.userInfo.userId) {
				uni.navigateTo({
					url: `/pages/login/login`
				});
			} else {
				uni.removeStorageSync('userAccount');
				uni.removeStorage({
					key: 'userInfo',
					success: res => {
						location.reload();
					}
				});
			}
		},
		/* 轮播图点击事件  暂只做播放歌曲功能 */
		swiperClick(item) {
			switch (item.targetType) {
				case 1:
					uni.navigateTo({
						url: `/pages/detail/detail?songId=${item.song.id}`
					});
					break;

				case 10:
					console.log('新碟首发');
					break;

				case 1000:
					uni.navigateTo({
						url: `/pages/top/top?id=${item.targetId}`
					});
					break;

				case 1001:
					console.log('播客');
					break;

				case 3000:
					console.log('数字专辑');
					break;

				default:
					uni.navigateTo({
						url: `/pages/detail/detail?songId=${item.song.id}`
					});
					break;
			}
		},
		/* 跳转个人页 */
		goPersonal() {
			uni.navigateTo({
				url: '/pages/personal/personal'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.index-search {
	display: flex;
	align-items: center;
	height: 70rpx;
	margin: 0px 30rpx;
	background-color: #f7f7f7;
	border-radius: 50rpx;
	text {
		font-size: 26rpx;
		margin-left: 28rpx;
		margin-right: 26rpx;
	}
	input {
		font-size: 28rpx;
		flex: 1;
	}
}

.index-swiper {
	margin: 0 30rpx 20rpx;
	swiper {
		height: 300rpx;
		width: 100%;
	}
	swiper-item {
		border-radius: 20rpx;
		position: relative;
	}
	img {
		height: 100%;
		width: 100%;
	}
	.banner-title {
		border-radius: 20rpx 0 0 0;
		padding: 4rpx 16rpx;
		color: #f7f7f7;
		font-size: 26rpx;
		position: absolute;
		bottom: 0;
		right: 0;
	}
}

.scroll-box {
	width: 100%;
	height: calc(100vh - 75px - 70rpx - 110rpx);
}

.user-box {
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx 10rpx;
	view:nth-child(1) {
		display: flex;
		align-items: inherit;
		img {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			margin-right: 10rpx;
		}
	}
	view:nth-child(2) {
		border: 1px solid #b5b5b5;
		font-size: 30rpx;
		padding: 6rpx 18rpx;
		border-radius: 20rpx;
	}
}

.top-music-list {
	margin: 0 30rpx;
	.music-item {
		display: flex;
		margin-bottom: 34rpx;
	}
}

.music-item .music-img {
	width: 212rpx;
	height: 212rpx;
	position: relative;
	border-radius: 30rpx;
	overflow: hidden;
	margin-right: 22rpx;
	image {
		width: 100%;
		height: 100%;
	}
	text {
		position: absolute;
		left: 12rpx;
		bottom: 16rpx;
		font-size: 20rpx;
		color: white;
	}
}

.music-text {
	font-size: 22rpx;
	line-height: 66rpx;
	width: calc(100vw - 60rpx - 212rpx - 22rpx);
	text {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
}

::v-deep .skeleton-avatar {
	border-radius: 30rpx;
}

::v-deep .skeleton-content {
	padding-top: 30rpx;
}
</style>
